<template>
  <div class="createPost-container">
    <el-form class="form-container" :model="form" :disabled="loading" :rules="rules" ref="refForm" label-width="100px">

      <el-form-item label="活动入口开关时间:" class="postInfo-container-item" prop="time">
        <el-date-picker
          v-model="form.time"
          class="filter-item"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          :default-time="['00:00:00', '23:59:59']"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="活动正式开关时间:" class="postInfo-container-item" prop="time1">
        <el-date-picker
          v-model="form.time1"
          class="filter-item"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          :default-time="['00:00:00', '23:59:59']"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="活动类型:" prop="actType">
        <el-select v-model="form.actType">
          <el-option v-for="item in consts.OFFER_TYPE"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="活动主题:" prop="name">
        <el-input type="textarea" :rows="1" class="article-textarea" autosize
                  v-model="form.name">
        </el-input>
      </el-form-item>

      <el-form-item label="活动ID:" prop="actId">
        <el-select v-model="form.actId">
          <el-option v-for="item in consts.OFFER_ID"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="适用平台别名" prop="applicablePlatformAlias">
        <el-input type="textarea" :rows="1" class="article-textarea" autosize v-model="form.applicablePlatformAlias">
        </el-input>
      </el-form-item>

      <el-form-item label="适用平台:" prop="gameType">
        <checkbox-all v-model="form.gameType" :check-list="activityPlatForm"></checkbox-all>
      </el-form-item>

      <!--<el-form-item label="适用平台:" prop="gameType">-->
      <!--<el-select v-model="form.gameType" placeholder="请选择显示端" :multiple="true">-->
      <!--<el-option v-for="item in consts.PLATFORM_TYPE"-->
      <!--v-if="item.value !== -1"-->
      <!--:key="item.value"-->
      <!--:label="item.title"-->
      <!--:value="item.value">-->
      <!--</el-option>-->
      <!--</el-select>-->
      <!--</el-form-item>-->

      <!--<el-form-item label="显示端:" prop="showClient">-->
      <!--<checkbox-all v-model="form.showClient" :check-list="consts.DEVICE_TYPE"></checkbox-all>-->
      <!--</el-form-item>-->
      <el-form-item label="显示端:" prop="showClient">
        <checkbox-all v-model="form.showClient" :check-list="consts.DEVICE_TYPE_ACTIVE"></checkbox-all>
      </el-form-item>

      <el-row>
        <el-col :sm="12">
          <el-form-item label="现金网-PC端活动图:" prop="pcImage">
            <img :src="form.pcImage" v-if="form.pcImage" class="image"/>
            <editor-image color="#1890ff" v-model="form.pcImage" class="editor-upload-btn"
                          :limit="1"></editor-image>
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="现金网-PC端首页活动图:" prop="pcIndexImage">
          <img :src="form.pcIndexImage" v-if="form.pcIndexImage" class="image"/>
          <editor-image color="#1890ff" v-model="form.pcIndexImage" class="editor-upload-btn"
          :limit="1"></editor-image>
          <span class="tips">(如需设置该活动显示在pc端首页，请上传图片！尺寸：380*272)</span>
          </el-form-item>
        </el-col>
      </el-row>


      <el-form-item label="现金网-PC端链接地址" prop="pcUrl">
        <el-input type="textarea" :rows="1" class="article-textarea" autosize placeholder="请输入链接地址"
                  v-model="form.pcUrl">
        </el-input>
        <el-tip>提示：内链直接填路径名，外链加http://，空链可不填。 填写即为跳转专题页活动。</el-tip>
      </el-form-item>

      <el-row>
        <el-col :sm="12">
          <el-form-item label="现金网-APP活动图" prop="h5Image">
            <img :src="form.h5Image" v-if="form.h5Image" class="image"/>
            <editor-image color="#1890ff" v-model="form.h5Image" class="editor-upload-btn"
                          :limit="1"></editor-image>
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <!--<el-form-item label="现金网-APP首页活动图:" prop="h5IndexImage">-->
          <!--<img :src="form.h5IndexImage" v-if="form.h5IndexImage" class="image"/>-->
          <!--<editor-image color="#1890ff" v-model="form.h5IndexImage" class="editor-upload-btn"-->
          <!--:limit="1"></editor-image>-->
          <!--</el-form-item>-->
        </el-col>
      </el-row>


      <el-form-item label="现金网-APP链接地址" prop="h5Url">
        <el-input type="textarea" :rows="1" class="article-textarea" autosize placeholder="请输入链接地址"
                  v-model="form.h5Url">
        </el-input>
        <el-tip>提示：内链直接填路径名，外链加http://，空链可不填。 填写即为跳转专题页活动。</el-tip>
      </el-form-item>

      <el-row>
        <el-col :sm="12">
          <el-form-item label="体育-APP活动图:" prop="sportImage">
            <img :src="form.sportImage" v-if="form.sportImage" class="image"/>
            <editor-image color="#1890ff" v-model="form.sportImage" class="editor-upload-btn"
                          :limit="1"></editor-image>
          </el-form-item>
        </el-col>
        <!--<el-col :sm="12">-->
        <!--<el-form-item label="体育-APP首页活动图:" prop="sportIndexImage">-->
        <!--<img :src="form.sportIndexImage" v-if="form.sportIndexImage" class="image"/>-->
        <!--<editor-image color="#1890ff" v-model="form.sportIndexImage" class="editor-upload-btn"-->
        <!--:limit="1"></editor-image>-->
        <!--</el-form-item>-->
        <!--</el-col>-->
      </el-row>

      <el-form-item label="体育-APP链接地址" prop="sportUrl">
        <el-input type="textarea" :rows="1" class="article-textarea" autosize placeholder="请输入链接地址"
                  v-model="form.sportUrl">
        </el-input>
        <el-tip>提示：内链直接填路径名，外链加http://，空链可不填。 填写即为跳转专题页活动。</el-tip>
      </el-form-item>

      <!--<el-form-item label="活动内容:" prop="content">-->
      <!--<Tinymce :height=400 ref="editor" v-model="form.content"/>-->
      <!--</el-form-item>-->
      <el-button v-loading="loading" style="margin-left: 10px;" type="primary"
                 @click="doSave({
                       action: 'saveForm',
                       form: {
                       name: 'refForm',
                       scrollToError:true,
                       }})">确定
      </el-button>
    </el-form>
  </div>
</template>

<script>
// import Tinymce from '@/components/Tinymce'
import EditorImage from '@/components/Tinymce/components/editorImage';

import {
  marketingOfferDetailApi as detailApi,
  marketingOfferSaveApi as saveApi,
} from '@/services/api/marketing';

import { form, factory } from '@/build';

export default {
  name: 'help-edit',
  components: {
    // Tinymce,
    EditorImage,
  },

  mixins: [form],

  props: ['id', 'rowData'],
  data() {
    return {
      isIndeterminate: false,
      selectAll: false,
      form: {
        id: this.id,
        time: undefined,
        time1: undefined,
        name: undefined,
        actId: undefined,
        actType: undefined,
        platform: [],
        gameType: [],
        showClient: [],
        pcImage: undefined,
        pcIndexImage: undefined,
        pcUrl: undefined,
        h5Image: undefined,
        h5IndexImage: undefined,
        h5Url: undefined,
        sportImage: undefined,
        sportIndexImage: undefined,
        sportUrl: undefined,
        indexAct: 0, // 是否推到首页：0否，1是.默认传0
        applicablePlatformAlias: '',
      },
      rules: {
        time: { type: 'array', required: true, message: '活动入口开关时间必须填写' },
        time1: { type: 'array', required: true, message: '活动正式开关时间必须填写' },
        name: { required: true, message: '活动主题必须填写' },
        actId: { required: true, message: '活动ID必须选择' },
        actType: { required: true, message: '活动类型必须选择' },
        gameType: { type: 'array', required: true, message: '适用平台必须选择' },
        showClient: { type: 'array', required: true, message: '显示端必须选择' },
        // pcUrl: factory.getRule('activeUri'),
        // h5Url: factory.getRule('activeUri'),
        // sportUrl: factory.getRule('activeUri'),
        // content: {required: true, message: '活动内容必须填写'},
        // h5Image: {required: true, message: 'H5端活动图必须上传'},
        // appImage: {required: true, message: 'APP端活动图必须上传'},
        // pcImage: {required: true, message: 'PC端活动必须上传'},
      },
    };
  },
  mounted() {
    if (!_.isUndefined(this.rowData)) {
      const {
        showClientArray, startTime, endTime, showStartTime, showEndTime, gameType, actType,
      } = this.rowData;
      this.form = {
        ...this.rowData,
        gameType: JSON.parse(gameType),
        actType: JSON.parse(actType),
        time: [moment(showStartTime).format('YYYY-MM-DD HH:mm:ss'), moment(showEndTime).format('YYYY-MM-DD HH:mm:ss')],
        time1: [moment(startTime).format('YYYY-MM-DD HH:mm:ss'), moment(endTime).format('YYYY-MM-DD HH:mm:ss')],
        showClient: showClientArray,
      };
    }

    this.bindSave(saveApi, 'saveForm', 'form', {
      beforeSend: (data) => {
        const {
          showClient, gameType, time, time1, pcImage, pcIndexImage, h5Image, h5IndexImage, sportImage, sportIndexImage, pcUrl,
          h5Url, sportUrl, applicablePlatformAlias,
        } = data;
        let showStartTime;
        let showEndTime;
        let startTime;
        let endTime;
        if (!_.isUndefined(time) && _.isArray(time)) {
          showStartTime = time[0];
          showEndTime = time[1];
        }
        if (!_.isUndefined(time1) && _.isArray(time1)) {
          startTime = time1[0];
          endTime = time1[1];
        }
        let pcimg;
        if (_.isArray(pcImage)) {
          pcimg = pcImage.join(',');
        } else {
          pcimg = pcImage;
        }
        return {
          ...data,
          showClient: showClient.join(','),
          showStartTime,
          showEndTime,
          startTime,
          endTime,
          gameType: gameType.join(','),
          pcImage: pcimg,
          pcIndexImage: _.isArray(pcIndexImage) ? pcIndexImage.join(',') : pcIndexImage,
          h5Image: _.isArray(h5Image) ? h5Image.join(',') : h5Image,
          h5IndexImage: _.isArray(h5IndexImage) ? h5IndexImage.join(',') : h5IndexImage,
          sportImage: _.isArray(sportImage) ? sportImage.join(',') : sportImage,
          sportIndexImage: _.isArray(sportIndexImage) ? sportIndexImage.join(',') : sportIndexImage,
          // 去除前后空格
          h5Url: _.trim(h5Url),
          pcUrl: _.trim(pcUrl),
          sportUrl: _.trim(sportUrl),
          applicablePlatformAlias,
        };
      },
      afterSuccess: () => {
        this.$emit('on-success');
        if (!this.form.id) {
          this.$router.push({
            path: '/activity/activity-list',
            replace: true,
            query: {
              tab: 'one',
            },
          });
          localStorage.setItem('freshpage', true);
          this.$refs.refForm.resetFields();
        }
      },
    });
  },
  computed: {
    activityPlatForm() {
      const activityPlatForm = [];
      _.each(consts.GAME_ID, (item) => {
        activityPlatForm.push(
          {
            title: item.title,
            label: item.label,
            value: item.gamePlatformId,
          },
        );
      });
      return activityPlatForm;
    },
  },
};
</script>

<style lang="scss" scoped>
  .image {
    width: 100px;
    height: 100px;
  }
  .tips{
    color:red;
  }
</style>
